<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="#D8D8D8" indicator-active-color="rgba(0,0,0,.3)">
			<swiper-item class="swiper-item" v-for="item in bannerList" :key="item.id">
				<image :src="item.pic"></image>
			</swiper-item>
		</swiper>
		<view class="container-c">
			<!-- 分类导航 -->
			<view class="kind">
				<view class="kind-item" @tap="goList(item.id)" v-for="item in navList" :key="item.id">
					<image :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 限时活动 -->
			<view class="activity">
				<view class="left">
					<image class="icon"
						src=""
						mode=""></image>
					<text>限时活动:</text>
				</view>
				<view class="right">
					<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" vertical="true">
						<swiper-item class="item" v-for="item in activityList" :key="item.id">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								<text class="old">{{item.price}}</text>
								<text class="now">现价:{{item.promotionPrice}}元</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view class="hot-title">
				热门推荐
			</view>
			<swiper class="hot" display-multiple-items=3 :indicator-dots="false" :autoplay="true" :interval="3000"
				:duration="1000" circular=true duration=2000>
				<swiper-item v-for="item in hotList" :key="item.id">
					<view class="swiper-item">
						<image :src="item.pic" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</swiper-item>
			</swiper>
			<!-- 新品推荐 -->
			<view class="hot-title">
				新品推荐
			</view>
			<scroll-view enable-flex=true class="newbox" scroll-x="true">
				<view class="new-item" v-for="item in productList" :key="item.id">
					<view class="content">
						<image class="img" :src="item.pic" mode=""></image>
						<view class="right">
							<view class="name">
								{{item.name}}
							</view>
							<view class="">
								价格:{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="hot-title">
				猜你喜欢
			</view>
			<view class="productlist">
				<view class="item" v-for="item in likeList" :key="item.id">
					<image :src="item.pic" mode=""></image>
					<view class="text">
						<view class="name">
							{{item.name}}
						</view>
						<view class="info">
							<text class="price">¥{{item.price}}元</text>
							<text class="bufan">不凡</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerAds,
		nav,
		recommendList,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from "@/api/home/index.js"
	export default {
		data() {
			return {
				height: 0,
				bannerList: [],
				navList: [],
				activityList: [],
				hotList: [],
				productList: [],
				likeList: []
			};
		},
		methods: {
			async init() {
				var banner = await bannerAds();
				this.bannerList = banner.data.items;

				var navs = await nav();
				this.navList = navs.data.category.children;
				// console.log(navs)
				var recommend = await recommendList();
				this.activityList = recommend.data.items;

				var hot = await hotList();
				this.hotList = hot.data.items;

				var newProduct = await lejuLatestProducts();
				// console.log(newProduct)
				this.productList = newProduct.data.productList;

				var like = await saleMostProducts();
				console.log(like)
				this.likeList = like.data.items;


				uni.stopPullDownRefresh();
			},
			goList(id) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/list/list?id=${id}`
				});
			}
		},
		onPullDownRefresh() {
			this.init()
		},
		async onLoad() {
			// #ifdef MP-WEIXIN
			// console.log(uni.getMenuButtonBoundingClientRect())
			// this.height=uni.getMenuButtonBoundingClientRect().height+uni.getMenuButtonBoundingClientRect().top;
			// #endif
			// var _this=this;
			// uni.getSystemInfo({
			// 	success(res){
			// 		console.log(res)
			// 		_this.height=res.statusBarHeight;
			// 	}		
			this.init()
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		// height: 100vh;
	}

	.container-c {
		width: 670rpx;
		margin: 0 auto;
	}

	.swiper {
		height: 360rpx;

		image {
			width: 100%;
			height: 360rpx;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
		}
	}

	.kind {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 60rpx 0;

		.kind-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				margin-top: 10rpx;
			}
		}

	}

	.activity {

		// margin-bottom: 40rpx;
		uni-swiper {
			height: 96rpx;
		}

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		background-color: #fff;

		.icon {
			animation: mymove .5s infinite;
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.left {
			width: 35%;

			text {
				color: orange;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.right {
			width: 65%;
			swiper {
				height: 96rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;
				height: 96rpx;

				.name {
					width: 250rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					color: #3e3e3e;
					font-size: 28rpx;
				}
			}

			height: 96rpx;

			.price {
				display: flex;
				flex-direction: column;
				text-align: center;

				.old {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					text-decoration: line-through;
				}

				.now {
					color: red;
					font-size: 24rpx;
				}
			}
		}
	}

	@keyframes mymove {
		from {
			opacity: 0.3;
		}

		to {
			opacity: 1;
		}
	}

	.hot-title {
		font-size: 32rpx;
		font-weight: 600;
		margin: 80rpx 0 40rpx 0;
	}

	.hot {
		width: 100%;
		.swiper-item {
			width: 208rpx;
			height: 176rpx;
			image {
				width: 100%;
				height: 100%;
			}

			text {
				display: inline-block;
				width: 208rpx;
				font-size: 26rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}

	.newbox {
		width: 100%;
		overflow: auto;
		white-space: nowrap;
		.new-item {
			width: 590rpx;
			height: 260rpx;
			display: inline-block;
			margin-right: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.content {
				margin: 35rpx;
			}
			.img {
				width: 194rpx;
				height: 168rpx;
				float: left;
				border-radius: 10rpx;
			}

			.right {
				width: 300rpx;
				height: 168rpx;
				float: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				font-size: 26rpx;
				color: #3e3e3e;

				.name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}


	.productlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.item {
			width: 316rpx;

			image {
				width: 100%;
				height: 238rpx;
				margin-top: 40rpx;
			}

			.text {
				padding: 36rpx;
				background-color: #fff;
				border-radius: 0rpx 0rpx 10rpx 10rpx;

				.name {
					font-size: 26rpx;
					font-weight: 700;
					line-height: 38rpx;
					margin-top: 8rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.info {
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
				}
			}

		}
	}
</style>
